import React, { Component } from 'react';
import { connect } from 'react-redux'
import moment from 'moment'
import { Modal, Form, Input, Select, DatePicker, Table, Button, TreeSelect, Popconfirm, Row, Col, } from 'antd';
var _this, _props, _state;

const confirm = Modal.confirm;
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class BorrowReturnModal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedRows: [],
    };
  }

  okHandler = () => {
    const this_ = this;
    const { onOk, type,} = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (type === 'updateToReturn' && values.borrowReturnDetail.length == 0) {
          Modal.warning({
            title: '提示',
            content: '请先勾选需要归还的设备',
          })
          return;
        }
        
        confirm({
          title: '提示',
          content: type === 'updateToBorrow' ? '确认借用？' : '确认归还？',
          onOk() {
            this_.setState({
              selectedRows: [],
            })
            for (var i = 0; i < values.borrowReturnDetail.length; i++) {
              values.borrowReturnDetail[i].id = values.borrowReturnDetail[i].id_;
            }
            onOk(values);
          },
        });
      }
    });
  };

  //点击迁移弹出迁移窗口
  onAddTransferItem = (id) => {
    const { onAddTransferItem } = this.props;
    onAddTransferItem(id);
  };


  //点击增加迁移详情
  onAddDetail = () => {
    const { onAddDetail } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onAddDetail();
      }
    });
  };

  //点击编辑弹出编辑窗口
  onEditRemark = (id) => {
    const { onEditRemark } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onEditRemark(id);
      }
    });
  };


  render() {
    const { children, dispatch, assetType, assetList, id, borrowReturnDetailList, item, roomList, type, assetBrandList, userList, addDetailHandler } = this.props;

    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    const formItemLayout2 = {
      labelCol: { span: 2 },
      wrapperCol: { span: 18 },
    };

    const formItemLayout3 = {
      labelCol: { span: 3 },
      wrapperCol: { span: 18 },
    };

    const getRoom = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    })

    const getUser = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    })

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRows: selectedRows,
        })
      },
    }

    const columns = [{
      title: '资产编号',
      dataIndex: 'assetNo',
      key: 'assetNo',
      fixed: 'left',
      width: 150
    }, {
      title: '资产分类',
      dataIndex: 'typeName',
      key: 'typeName',
      width: 120
    }, {
      title: '设备名称',
      dataIndex: 'assetName',
      key: 'assetName',
      width: 150
    }, {
      title: '设备型号',
      dataIndex: 'modelName',
      key: 'modelName',
      width: 120,
    }, {
      title: '设备序列号',
      dataIndex: 'serialNo',
      key: 'serialNo',
      width: 150,
    }, {
      title: 'RFID编码',
      dataIndex: 'rfidNo',
      key: 'rfidNo',
      width: 100,
    },
    {
      title: '借用类型',
      dataIndex: 'borrowType',
      key: 'borrowType',
      width: 100,
      render: (value, row, index) => {
          return (
              value == 1 ? "内部借用" : value == 2 ? "外部借用" : ''
          )
      }
  },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (value, row, index) => {
        return (
          value == 1 ? "新增状态" : value == 2 ? "已借用" : value == 3 ? "已归还" : ''
        )
      }
    },
    {
      title: '原管理部门',
      dataIndex: 'originalManageBranchName',
      key: 'originalManageBranchName',
      width: 120,
    },
    {
      title: '原归属部门',
      dataIndex: 'originalUseBranchName',
      key: 'originalUseBranchName',
      width: 120,
    },
    {
      title: '原领用人',
      dataIndex: 'originalEndUserName',
      key: 'originalEndUserName',
      width: 120,
    },

    {
      title: '借用管理部门',
      dataIndex: 'targetManageBranchName',
      key: 'targetManageBranchName',
      width: 120,
    },
    {
      title: '借用部门',
      dataIndex: 'targetUseBranchName',
      key: 'targetUseBranchName',
      width: 120,
    },
    {
      title: '借用人',
      dataIndex: 'targetEndUserName',
      key: 'targetEndUserName',
      width: 120,
    },
    {
      title: '备注',
      dataIndex: 'returnRemark',
      key: 'returnRemark',
      width: 150,
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 80,
      render: (text, record) => (
        <span>
          {(record.status == 3) ? '已归还' :
            <span>
              <a onClick={this.onEditRemark.bind(null, record)}>修改备注</a>
            </span>}
        </span>
      ),
    }];

    return (
      <span>
        <Modal
          maskClosable={this.props.maskClosable}
          confirmLoading={this.props.confirmLoading}
          title={this.props.title}
          width={1000}
          zIndex={100}
          visible={this.props.visible}
          onOk={this.okHandler}
          onCancel={this.props.onCancel}
          key={this.props.newKey}
        >
          <div style={{ width: 'auto', backgroundColor: '#fff' }}>
            <div style={{  }}>
              <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>
                <Form layout={'inline'} style={{ marginTop: '-16px' }}>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('borrowReturnDetail', { initialValue: type === 'updateToBorrow' ? borrowReturnDetailList : this.state.selectedRows })(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('operatorBy', { initialValue: item.operatorBy_ })(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('borrowType', { initialValue: item.borrowType })(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('roomId', { initialValue: item.roomId_ })(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('status_', { initialValue: item.status })(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem
                        label="单号"
                      >
                        {
                          getFieldDecorator('id', {
                            initialValue: item.id_,
                          })(<Input readOnly="readOnly" style={{ width: '200px' }} />)
                        }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        label="操作人"
                      >
                        {getFieldDecorator('userName', {
                          initialValue: item.userName,
                        })(<Input readOnly="readOnly" style={{ width: '200px' }} />)}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        label="预计执行时间"
                      >
                        {getFieldDecorator('executeTime', {
                          initialValue: item.executeTime + '',
                        })(<Input readOnly="readOnly" style={{ width: '200px' }} />)}
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '20px' }}>
                    <Col span={24}>
                      <FormItem
                        label="备注"
                      >
                        {
                          getFieldDecorator('remark', {
                            initialValue: item.remark,
                            rules: [{ max: 200, message: '备注信息 200 字符以内' },]
                          })(<Input style={{ width: '890px' }} readOnly="readOnly" type="textarea" autosize={{ minRows: 3, maxRows: 3 }} />)
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '15px' }}>
                    <Col span={24}>
                      <hr style={{ width: '926px', height: '0px', borderTop: '1px solid #e9e9e9', borderRight: '0px', borderBottom: '0px', borderLeft: '0px' }} />
                    </Col>
                  </Row>

                  <div style={{ }}>
                    <div style={{ width: '100%', padding: "10px 20px 20px"  }}>
                      <Table columns={columns}
                        rowSelection={type === 'updateToReturn' ? rowSelection :null}
                        rowKey={record => record.id_}
                        dataSource={borrowReturnDetailList}
                        pagination={false}
                        scroll={{ x: 2000 }}
                      />
                    </div>
                  </div>
                </Form>
              </div>

            </div>
          </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(BorrowReturnModal)
